import React, { Component, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';
import { Row, Col, Table } from 'antd';
import { connect } from 'dva';
import styles from './index.less';
import Title from '../Title';

const KPIIncrement = ({ title, type, KpiIncrement = {} }) => {
  const kpiRef = useRef();

  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(kpiRef.current);

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        bottom: 'bottom',
        data: ['存量', '增量'],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {
              value:
                type == 'count'
                  ? KpiIncrement.stockCount
                  : KpiIncrement.stockMoney,
              name: '存量',
            },
            {
              value:
                type == 'count'
                  ? KpiIncrement.incrementCount
                  : KpiIncrement.incrementMoney,
              name: '增量',
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, []);

  const columns = [
    { title: '分类', dataIndex: 'type', width: 150 },
    { title: '项目数量', dataIndex: 'number', width: 150 },
  ];
  const dataSource = [
    {
      type: '存量',
      number:
        type == 'count' ? KpiIncrement.stockCount : KpiIncrement.stockMoney,
    },
    {
      type: '增量',
      number:
        type == 'count'
          ? KpiIncrement.incrementCount
          : KpiIncrement.incrementMoney,
    },
  ];

  return (
    <div>
      <Title title={title}></Title>

      <Row className={styles.container}>
        <Col span={12}>
          <div ref={kpiRef} style={{ height: 300 }}></div>
        </Col>
        <Col span={12}>
          <Table
            columns={columns}
            dataSource={dataSource}
            pagination={false}
            bordered
          ></Table>
        </Col>
      </Row>
    </div>
  );
};
export default connect(state => state.home)(KPIIncrement);
